<template>
  <div>
    <header1>{{movieObj.nm}}</header1>
    <div class="header4">
      <span><img src="//p0.meituan.net/scarlett/448afce485c1f342895185c2be668fa411803.png" /></span>
      <span>19.9元起购票</span>
      <a href="#">
        <span>打开App<img class="jt" src="//p0.meituan.net/scarlett/70a18c9d3c345f442e5a4e6bf2d16180779.png" /></span>
      </a>
    </div>
    <div class="bj" :style="'background-image:url('+movieObj.img+')'"></div>
    <div class="itemcon">
      <img :src="movieObj.img" alt="">
      <div class="msg">
        <div>{{movieObj.nm}}</div>
        <div>{{movieObj.enm}}</div>
        <div><span>{{movieObj.wish}}</span><span>想看</span></div>
        <div><span>{{movieObj.cat}}</span></div>
        <div><span>{{movieObj.src}}/</span><span>{{movieObj.dur}}</span><span>分钟</span></div>
        <div>{{movieObj.pubDesc}}</div>
      </div>
      <div class="arrow">
        <span class="arrow-bg"></span>
      </div>
    </div>
    <div class="date">
      <ul class="rq">
        <li v-for="(item,index) in dateArr" :key="item.date" @click="getCinemaData(item.date,index)"
          :class="index == activeid?'active':''">
          {{ item.date | format(index)}}
        </li>
      </ul>
    </div>
    <div class="type">
      <div><span>全城</span><span class="drop"></span></div>
      <div><span>品牌</span><span class="drop"></span></div>
      <div><span>特色</span><span class="drop"></span></div>
    </div>
    <ul class="cinenalist">
      <li v-for="item in cinemaArr" :key="item.id">
        <div class="it">
          <div>{{item.nm}}</div>
          <div>{{item.addr}}</div>
          <div>
            <span v-for="it in item.labels" :key="it.shopId">
              <span v-if="it.name=='小吃'||it.name=='折扣卡'" class="yellow">{{it.name}}</span>
              <span v-else class="green">{{it.name}}</span></span>
          </div>
          <div v-if="item.promotion.cardPromotionTag">
            <img src="http://p1.meituan.net/scarlett/ff1c6e33ed0ac3cd862910a83d4bf959583.png">
            <span>{{item.promotion.cardPromotionTag}}</span>
          </div>
          <div><span>近期场次:</span><span>{{item.showTimes}}</span></div>
        </div>
        <div class="price"><span>{{item.price}}</span><span>元起</span></div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';
import header1 from "@/components/commonh/header1";
export default {
  name: "detail",
  data: function () {
    return {
      movieObj: {},
      dateArr: [],
      cinemaArr: [],
      id: 0,
      activeid: 0
    }
  },
  components: {
    header1
  },
  mounted () {
    this.id = this.$route.params.id;
    axios.get('/api/mtrade/mmdb/movie/v5/' + this.id + ".json").then((res) => {
      console.log(res);
      this.movieObj = res.data.data.movie;
      this.movieObj.img = this.movieObj.img.replace("w.h", "110.150");
      console.log(this.movieObj.img);
    })
    axios
      .get(
        "/api/mtrade/mmcs/show/v1/movie/showdays.json?movieId=" +
        this.id +
        "&channelId=4&cityId=30"
      )
      .then((res) => {
        console.log(res);
        this.dateArr = res.data.data.dates;
        this.getData(this.dateArr[0].date)
      });
  },
  filters: {
    format (val, index) {
      var arr = val.split('-')
      var str = '';
      var jintian = ['今天', '明天', '后天']
      if (index < 3) {
        str += jintian[index]
      } else {
        str += `周${"日一二三四五六".charAt(new Date(val).getDay())}`
      }
      str += `${arr[1]}月${arr[2]}日`
      return str
    }
  },
  methods: {
    getCinemaData (date, index) {
      this.activeid = index;
      this.getData(date)
    },
    getData (date) {
      axios
        .get("api/mtrade/mmcs/cinema/v1/select/movie/cinemas.json?limit=20&offset=0&utm_term=7.5&client=iphone&channelId=4&areaId=-1&brandId=-1&districtId=-1&hallType=-1&lineId=-1&movieId="
          + this.id + "&serviceId=-1&stationId=-1&showDate=" + date + "&cityId=57&ci=57").then(res => {
            this.cinemaArr = res.data.data.cinemas;
            console.log(res)
          })
    }
  }
}
</script>

<style scoped>
.it {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 12px;
}
.it > div:first-of-type {
  font-size: 16px;
  color: #000;
}
.it > div:nth-of-type(2) {
  font-size: 13px;
}
.it > div:nth-of-type(3) {
  display: flex;
}
.green {
  margin-left: 5px;
  border: 1px solid #589daf;
  border-radius: 2px;
  color: #589daf;
  padding: 0 2px 0 2px;
}
.it > div:nth-of-type(3) .yellow {
  margin-left: 5px;
  color: #f90;
  border: 1px solid #f90;
  border-radius: 2px;
  padding: 0 2px 0 2px;
}
.it > div:nth-of-type(4) > img {
  width: 15px;
  height: 14px;
}
.it > div:nth-of-type(4),
.it > div:nth-of-type(5) {
  color: #999;
}
.price {
  position: absolute;
  color: #f03d37;
  right: 30px;
  top: 20px;
}
.price > span:first-of-type {
  font-size: 18px;
}
.cinenalist > li {
  width: 360px;
  height: 143px;
  box-sizing: border-box;
  padding: 13px 15px 13px 0;
  position: relative;
  display: flex;
  margin-left: 15px;
}
.cinenalist > li::after {
  content: " ";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.type {
  display: flex;
  justify-content: space-around;
  background: #fff;
}
.type > div {
  width: 125px;
  height: 40px;
  line-height: 40px;
  position: relative;
  text-align: center;
  border-bottom: 1px solid #ccc;
}
.type > div::before {
  content: "";
  display: block;
  position: absolute;
  height: 20px;
  top: 10px;
  left: 0;
  border-left: 1px solid #e8e8e8;
}
.type > div > span:first-of-type {
  font-size: 13px;
  color: #777;
}
.drop {
  display: inline-block;
  position: absolute;
  top: 18px;
  width: 0;
  height: 0;
  margin-left: 4px;
  border: 4px solid rgba(0, 0, 0, 0);
  border-top-color: #b0b0b0;
}
.date {
  width: 100%;
  height: 45px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background: #fff;
  overflow: scroll;
}
.date ul {
  width: 1200px;
  height: 100%;
  display: flex;
}
.date > ul > li.active {
  color: #f03d37;
  border-bottom: 2px solid #f03d37 !important;
}
.date ul li {
  width: 115px;
  height: 43px;
  line-height: 43px;
  font-size: 14px;
  margin-left: 4.5px;
  text-align: center;
}
.itemcon {
  height: 150px;
  display: flex;
  padding: 19px 30px 19px 15px;
  position: relative;
  font-size: 12px;
  /* color: #fff; */
}
.itemcon img {
  width: 110px;
  height: 150px;
}
.bj {
  width: 100%;
  height: 188px;
  z-index: -1;
  overflow: hidden;
  position: absolute;
  filter: blur(50px);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.55;
}
.msg {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 10px;
}
.msg > div:first-of-type {
  font-size: 20px;
  font-weight: 700;
}
.msg > div:nth-of-type(3) > span:first-of-type {
  font-size: 18px;
  font-weight: 700;
  color: #fc0;
}
.arrow {
  right: 15px;
  top: 85px;
  position: absolute;
}
.arrow-bg {
  display: block;
  width: 10px;
  height: 14.5px;
  background: url();
  background-size: cover;
}
.header4 {
  width: 100%;
  height: 60px;
  position: relative;
  background: #fff;
  display: flex;
  align-items: center;
}
.header4 > span:nth-of-type(1) img {
  width: 94px;
  height: 39px;
  position: absolute;
  left: 10px;
  top: 10px;
}
.header4 span:nth-of-type(2) {
  font-size: 13px;
  color: #666;
  font-weight: 620;
  font-family: PingFangSC-Regular, Arial, Helvetica, sans-seri;
  position: absolute;
  right: 100px;
}
.header4 > a {
  position: absolute;
  right: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
}
.header4 > a > span {
  font-size: 14px;
  color: #b37e7e;
  right: 0;
}
.header4 > a > span img {
  width: 12px;
  height: 11px;
  position: absolute;
  right: -15px;
  bottom: 3px;
}
</style>